<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <font-awesome-icon :icon="['fas', 'chevron-left']" onclick="history.go(-1)" />
            <p>选择体检日期</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <section>
            <div class="date-box">
                <font-awesome-icon :icon="['fas', 'angle-left']" @click="subtractMonth" />
                <p>{{ checkAvailability.year + "年" + checkAvailability.month + "月" }}</p>
                <font-awesome-icon :icon="['fas', 'angle-right']" @click="addMonth" />
            </div>
            <table>
                <tr>
                    <th>日</th>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th>六</th>
                </tr>
            </table>
            <ul>
                <li v-for="(calendar, index) in checkAvailability.days" :key="index">
                    <p :class="{
                        fontcolor: (calendar.open == true && calendar.remainingSlots != 0),
                        pselect: calendar.selectDay == 1,
                    }" @click="selectDay(index)">
                        {{ calendar.date != null ? new Date(calendar.date).getDate() : '' }}
                    </p>
                    <p>
                        {{ (calendar.open == true && calendar.remainingSlots != 0) ? "余" +
                            calendar.remainingSlots : "" }}
                    </p>
                </li>
            </ul>
        </section>

        <div class="bottom-btn">
            <div></div>
            <div @click="toConfirmOrder">下一步</div>
        </div>

        <div class="bottom-ban"></div>
        <Footer></Footer>
    </div>
</template>
<script lang="ts" setup>

import Footer from '@/components/Footer.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import axios from "../plugin/axiosInstance";
import { reactive, ref } from 'vue';


const checkAvailability = reactive({
    hpId: route.query.hpId,
    smId: route.query.smId,
    year: null,
    month: null,
    days: [],
    selectDay: "",
});

// 获取当前年月
const getDate = () => {
    var getTime = new Date().getTime(); //获取到当前时间戳
    var time = new Date(getTime); //创建一个日期对象
    var year = time.getFullYear(); // 年
    checkAvailability.year = year;
    var month = (time.getMonth() + 1); // 月
    checkAvailability.month = month;

    // console.log(year + '-' + month + '-' + day);
}


// 获取将要查询的日期YYYY-MM-DD
const getCalendarDate = () => {
    var year = checkAvailability.year;
    var month = checkAvailability.month + '';
    month = month.padStart(2, '0');
    var day = '01';
    return year + '-' + month + '-' + day;
};

// 获取可以预约的日期列表
const getAvailable = () => {
    axios.get('/order/checkAvailability', {
        params: {
            smId: checkAvailability.smId,
            hpId: checkAvailability.hpId,
            startDate: getCalendarDate()
        }
    }).then(res => {
        if (res.data.code == 200) {
            /*             checkAvailability.year = res.data.data.year;
                        checkAvailability.month = res.data.data.month; */
            checkAvailability.days = res.data.data.days;
            var flag = 1;
            //需要对返回数组进行再加工
            for (let i = 0; i < checkAvailability.days.length; i++) {
                //返回数组的前几个元素可能为空
                if (checkAvailability.days[i].date != null) {
                    //1、需要将日期day单独提取出来显示
                    checkAvailability.days[i].day = parseInt(
                        checkAvailability.days[i].date.substring(8)
                    );
                    //2、给每一个日期添加一个是否选中的标识（0：未选中；1：选中）
                    /* if (checkAvailability.days[i].date == checkAvailability.selectDay) {
                        checkAvailability.days[i].selectDay = 1;
                    } else {
                        checkAvailability.days[i].selectDay = 0;
                    } */
                    if (flag === 1) {
                        if (checkAvailability.days[i].open == true) {
                            checkAvailability.days[i].selectDay = 1;
                            flag = 0;
                        }
                    }
                }
            }
        }
    })
}

//上一个月
function subtractMonth() {
    if (checkAvailability.month > 1) {
        checkAvailability.month--;
    } else {
        checkAvailability.year--;
        checkAvailability.month = 12;
    }
    getAvailable();
}
//下一个月
function addMonth() {
    if (checkAvailability.month < 12) {
        checkAvailability.month++;
    } else {
        checkAvailability.year++;
        checkAvailability.month = 1;
    }
    getAvailable();
}

function selectDay(index) {
    //验证当前选中日期是否为可预约日期
    if (checkAvailability.days[index].open == false) {
        return;
    }
    //将所有日期的选中状态清空
    for (let i = 0; i < checkAvailability.days.length; i++) {
        checkAvailability.days[i].selectDay = 0;
    }
    checkAvailability.days[index].selectDay = 1;
    checkAvailability.selectDay = checkAvailability.days[index].date;
}

function toConfirmOrder() {
    if (checkAvailability.selectDay == '') {
        alert('请选择体检预约日期！');
        return;
    }
    router.push({ path: '/confirmOrder', query: { hpId: checkAvailability.hpId, smId: checkAvailability.smId, orderDate: checkAvailability.selectDay } });
}
const init = () => {
    getDate();
    getAvailable();
}

init();
</script>

<style scoped>
@import "../assets/css/selectdate.css";
</style>
